import { defineAsyncComponent } from "vue";
import {
  createRouter,
  createWebHashHistory, // hash模式
  createWebHistory, // history模式
} from "vue-router";

// import Home from "../views/Home/index.vue";
// import About from "../views/About/index.vue";

/*
  路由懒加载：访问什么组件，就只加载这个组件的内容，其他内容不加载
    1. 代码分割
      将路由组件打包时分割成单独js文件
    2. 按需加载
      当前需要使用路由组件才会加载对应的js文件

  打包代码：npm run build
  运行打包代码
    npm i serve -g
    serve dist  
*/
const Home = defineAsyncComponent(() => import("../views/Home/index.vue"));
const About = defineAsyncComponent(() => import("../views/About/index.vue"));

const routes = [
  {
    path: "/home",
    name: "Home", // 命名路由
    component: Home,
  },
  {
    path: "/about",
    name: "About", // 命名路由
    component: About,
  },
];

export default createRouter({
  history: createWebHashHistory(),
  // history: createWebHistory(),
  routes,
});
